<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>column瀑布流</title>
    <style>
        .wrap {
            column-count: 5;
            column-width:100px;
            Column-gap:10px;
            column-rule: 1px #f30 solid;
        }
        .d1,.d2,.d3,.d4,.d5,.d6{
            break-inside: avoid;
            background: #369;
            color: #fff;
            margin-bottom: 10px;
        }
        .d1 {height: 159px;}
        .d2 {height: 213px;}
        .d3 {height: 384px;}
        .d4 {height: 421px;}
        .d5 {height: 553px;}
        .d6 {height: 667px;}
    </style>
</head>

<body>
    <div class="wrap">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
        <div class="d5">5</div>
        <div class="d6">6</div>
        <div class="d1">7</div>
        <div class="d2">8</div>
        <div class="d3">9</div>
        <div class="d4">10</div>
        <div class="d5">11</div>
        <div class="d6">12</div>
        <div class="d1">13</div>
        <div class="d2">14</div>
        <div class="d3">15</div>
        <div class="d4">16</div>
        <div class="d5">17</div>
        <div class="d6">18</div>
    </div>
</body>

</html>